
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

    <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>

<form id="myForm" action="upload" method="post" enctype="multipart/form-data">
    <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传头像
    </button>
</form>

<script type="text/javascript">

</script>
<%--修改的弹出框 增加不需要用bookid，修改需要，两个模板都一样，只是在servlet中判断一下即可--%>
<div id="updateStaffDiv" style="display: none">
    <form class="layui-form" id="updateForm" lay-filter="updateForm">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="id" class="layui-input" lay-verify="required" style="display: none" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="staffName" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="roleId" id="updatestaffRname" lay-verify="required">
                    <option value="">请选择角色</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select name="deptid" id="updatestaffdname" lay-verify="required">
                    <option value="">请选择部门</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="updateBtnStaff">确认</button>
            </div>
        </div>
    </form>
</div>
<%--添加的弹出框 增加需要判断员工id--%>
<div id="addStaffDiv" style="display: none">
    <form class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">员工id</label>
            <div class="layui-input-inline">
                <input type="text" name="staffId" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="staffName" class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-inline">
                <%--<input type="text" name="idCard" class="layui-input" lay-verify="required">--%>
                <input type="text" name="idCard" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">入职时间</label>
            <div class="layui-input-inline">
                <input type="date" name="createdTime" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="roleId" id="addstaffrname" lay-verify="required">
                    <option value="">请选择角色</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select name="deptid" id="addstaffdname" lay-verify="required">
                    <option value="">请选择部门</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="addBtnStaff">确认</button>
            </div>
        </div>
    </form>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-radius" lay-event="getCheckData">删除选中行数据</button>
        <button type="button" id="add" class="layui-btn layui-btn-radius" lay-event="updatestaff">修改个人信息</button>
    </div>
</script>


<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script src="/static/build/layui.js"></script>

<script>
    layui.use(['table','layer','form','upload'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;

        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/information/uploadFile/' //上传接口
            ,done: function(res){
                //上传完毕回调
                alert("上传成功");
            }
            ,error: function(){
                //请求异常回调
                alert("上传失败");
            }
        });

        function showtable (){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/information/queryinformation'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'id',hide:true}
                    ,{field:'staffId', title:'员工id', width:100, edit: 'text'}
                    ,{field:'staffName', title:'员工姓名'}
                    ,{field:'password', title:'密码'}
                    ,{field:'phone', title:'电话'}
                    ,{field:'idCard', title:'身份证号'}
                    ,{field:'address', title:'地址', }
                    ,{field:'createdTime', title:'入职日期'}
                    ,{field:'resignedTime', title:'离职日期',hide:true}
                    ,{field:'status', title:'状态',templet:'#status'}
                    ,{field:'rid', title:'角色rID',hide:true}
                    ,{field:'roleId', title:'角色ID',hide:true}
                    ,{field:'rname', title:'角色'}
                    ,{field:'deptid', title:'ID',hide:true}
                    ,{field:'dname', title:'部门'}
                    ,{field:'url', title:'url',hide:true}
                ]]
                ,even: true //开启隔行背景

            });
        }
        //当页面加载完成时
        $(function () {
            showtable();
            showSelectDname();
            showSelectRname();
        })
        //刷新页面
        $("#updatetable").click(function () {
            showtable();
        })
        //搜索框
        form.on('submit(searchBtn)', function(data){
            table.reload('test', {
                where: {//设定异步数据接口的额外参数
                    deptid:data.field.deptid,
                    staffName:data.field.staffName,
                    address:data.field.address,
                } ,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        //这个方法是查询所有的员工角色,并填充到下拉框中
        function showSelectRname (){
            $.ajax({
                type:'get',
                dataType: 'json',
                url:'${pageContext.request.contextPath}/role/getAllRoleType',
                success:function (data){
                    var op = "";
                    for (var i=0;i<data.length;i++){
                        op += "<option value='"+data[i].rid+"'>"+data[i].rname+"</option>"
                    }
                    $('#addstaffrname').append(op);
                    $('#updatestaffRname').append(op);
                    form.render('select');//表格的更新渲染下拉框-----一定要记得
                }
            })
        }
        //这个方法是查询所有的员工部门,并填充到下拉框中
        function showSelectDname (){
            $.ajax({
                type:'post',
                dataType: 'json',
                url:'${pageContext.request.contextPath}/dept/queryAllDname',
                success:function (data){
                    var op = "";
                    for (var i=0;i<data.length;i++){
                        op += "<option value='"+data[i].deptid+"'>"+data[i].dname+"</option>"
                    }
                    $('#updatestaffdname').append(op);
                    $('#addstaffdname').append(op);
                    $('#addstaffdname1').append(op);
                    form.render('select');//表格的更新渲染下拉框-----一定要记得
                }
            })
        }

        //增加的提交按钮
        form.on('submit(addBtnStaff)', function(data){
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/staff/addstaff',
                data:data.field,//当前表单的全部的值
                dataType: 'json',
                success:function (data){
                    layer.closeAll();
                    if (data.code==200){
                        layer.msg(data.msg,{icon:1});//icon 样式
                    }else {
                        layer.msg(data.msg,{icon:5});
                    }
                    showtable();
                }
            })
            return false;//阻止表单跳转
        })


        //修改的提交按钮
        form.on('submit(updateBtnStaff)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/staff/updatestaff',
                async:false,
                data:data.field,//当前表单的全部的值
                success:function (data){
                    layer.closeAll();
                    if (data.code==200){
                        layer.msg(data.msg,{icon:1});//icon 样式
                    }else {
                        layer.msg(data.msg,{icon:5});
                    }
                    showtable();
                }
            })
            return false;//阻止表单跳转
        })

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'updatestaff':
                    layer.open({
                        type: 1 //类型
                        ,title: '添加'
                        ,area: ['500px','500px']
                        ,shade: 0
                        ,anim:4
                        ,maxmin: true
                        ,content: $('#addStaffDiv')
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'up'){
                $.ajax({
                    type:'get',
                    url:'${pageContext.request.contextPath}/staff/updateStaffByStatus',
                    data:{id:data.id,status:data.status},
                    success:function (data){
                        showtable();
                        if (data.code=="200"){
                            layer.msg(data.msg,{icon:1})
                        }else {
                            layer.msg("失败",{icon:5})
                        }

                    }
                })
                layer.close(index);
            } else if(obj.event === 'edit'){
                $("#updateForm")[0].reset();//清空表单中的数据
                layer.open({
                    type: 1 //类型
                    ,title: '修改'
                    ,area: ['500px', '500px']
                    ,shade: 0
                    ,anim:4
                    ,maxmin: true
                    ,content: $('#updateStaffDiv')
                });
                form.val("updateForm",data);
            }
        });
    });
</script>
</body>
</html>
